<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>实名制认证</title>
    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/res/jquery/ajaxfileupload.js"></script>
</head>
<body>


<form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data" class="imageForm">
    <div style="width: 300px;height: 200px;text-align: center;">
        <img id="img" src="../images/customer/personcard.jpg" style="max-width: 300px;max-height: 200px;"/>
    </div>
    <input type="file" class="myimage" onchange="changepic(this)" name="myimage" id="myimage" accept="image/jpg,image/jpeg,image/gif,image/png">
    <input type="button" class="submitBtn" value="提交">

</form>


<script>
    function changepic() {
            var reads = new FileReader();
            f = $(".myimage").get(0).files[0];
            reads.readAsDataURL(f);
            reads.onload = function(e) {
                $("#img").attr('src',this.result);
            };
        }

</script>

<script>
    $(".submitBtn").click(function () {


        var url = "${pageContext.request.contextPath}/personCardImg";
        var myimage = $(".imageForm").serialize();

        $.ajaxFileUpload({
            url: url,
            dataType: "application/json",
            secureuri: false,//是否启用安全机制
            fileElementId: 'myimage',
            success: function (result) {

                result = $.parseJSON(result.replace(/<.*?>/ig,""));
                console.log("result:" + result);
                console.log("result:" + JSON.stringify(result));


            }
        })


    });
</script>

</body>

</html>
